<template>
  <div  class="SongsHeader" @click="isShowCategory">
    <div @click.stop="category=true">
      <span class="SongsHeader-title">{{cat}}</span>
      <button class="SongsHeader-select"  @click.stop="category=!category">
          选择分类 
          <i class="el-icon-arrow-down SongsHeader-inco"></i>
        </button>
        <!-- 全部风格分类 -->
        <SongsCategory :category.sync="category"/>
    </div>
    <button class="SongsHeader-hot">热门</button>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import SongsCategory from '../SongsCategory'
export default {
  name: 'SongsHeader',
  data() {
    return {
      category:false
    }
  },
   components:{
        SongsCategory
    },
    computed:{
      ...mapState("playlist",["cat"])
    },
    methods:{
      // 给html添加点击事件，点其他地方让二级分类框隐藏
      isShowCategory(){
       document.documentElement.onclick = ()=>{
          this.category=false
        }
      }
    },

}
</script>

<style lang="less" scoped>
.SongsHeader {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 2px solid #c20c0c;
  .SongsHeader-title {
    font-size: 24px;
    padding-right:15px ;
  }
  .SongsHeader-select{
      cursor: pointer;
      line-height: 29px;
       font-size: 12px;
       padding: 0 10px;
       border-radius: 5px;
       color: #0c73c2;
      background-color:#fafafa;
      border: 1px solid #d3d3d3;
      vertical-align: bottom;
    .SongsHeader-inco{
         font-weight:bold;
    }
    &:hover{
      background-color: #fff;
    }
  }
  .SongsHeader-hot{
    width: 46px;
    height: 29px;
    background-color: #c20c0c;
    color: #fff;
    border-radius: 3px;
    border: 1px solid #aaa;
  }
}

</style>
